<template>
	<view>
		<view class="line marginTop3">
			<image mode="widthFix" class="icon-large" src="/static/black-logo.png"></image>
		</view>
		<view class="line textBlack18 marginTo marginTop2">您希望看到哪些创意领域的作品？</view>
		<view class="flex-line-center-in-line padding marginTop">
			<view class="bigEmpty image-box">
				<view v-for="(item,index) in list1 " :key="index">
					<view>
						<view class="box marginBottom" @click="select(item)">
							<view class="name textwhite14 padding">{{item.name}}</view>
							<image  class="image-content" mode="scaleToFill" :src="item.image"></image>
							<image  v-show="list3.includes(item)" class=" bottom-right" src="../../static/seleted.png" />
						</view>
					</view>
				</view>
			</view>
			<view class="bigEmpty marginLeft image-box ">
				<view v-for="(item,index) in list2 " :key="index">
					<view>
						<view class="box marginBottom" @click="select(item)">
							<view class="name textwhite14 padding">{{item.name}}</view>
							<image  class="image-content" mode="scaleToFill" :src="item.image"></image>
							<image  v-show="list3.includes(item)" class=" bottom-right" src="../../static/seleted.png" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-fix width100 ">
			<view class="btnBlue line margin" @click="submit() ">
				继续
			</view>
		</view>
	</view>
</template>

<script>
	import request from '/common/request.js';
	export default {
		data() {
			return {
				list1: [],
				list2: [],
				list3: [],
				loading: false,
				page: 0
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onReady: function() {
			this.requstData();
		},
		onLoad() {
			this.requstData();
		},
		onUnload() {

		},
		onReachBottom() {
			console.log('onReachBottom');
			this.requstData();
		},
		onPullDownRefresh() {
			this.list1 = [];
			this.list2 = [];
			this.list3 = [];
			console.log('onPullDownRefresh');
			this.requstData();
		},
		methods: {
			select(item) {
				if (this.list3.includes(item)) {
					var new_arr = []
					this.list3.forEach(item1 => (item1 != item && new_arr.push(item1)))
					this.list3 = new_arr;
				} else {
					this.list3.push(item);
				}
			},
			submit() {
				uni.setStorageSync("lovedCategory",this.list3)
				uni.navigateTo({
					url:"/"
				})
				// const that = this;
				// if (that.loading) {
				// 	return
				// }
				// that.loading = true;
				// const url = getApp().globalData.apiUrl + "/api/v1/user/addCategory";
				// var temp=[];
				// for(var i=0;i<this.list3.length;i++){
				// 	temp.push(this.list3[i].id)
				// }
				// request(url, "POST", temp, uni.getStorageSync("token"))
				// 	.then(function(res) {
					
				// 		console.log('返回正确回调', res)
						
				// 	}, function(err) {
				// 		console.log('返回错误回调', err)
				// 		that.loading = false;
				// 	})
			},
			requstData() {
				console.log('requstData');
				const that = this;
				if (that.loading) {
					return
				}
				that.loading = true;
				const url = getApp().globalData.apiUrl + "/api/v1/category";
				request(url, "GET", {
						page: that.page,
						size: 100
					}, uni.getStorageSync("token"))
					.then(function(res) {
						uni.stopPullDownRefresh()
						uni.setStorageSync("category",res.data)
						
						console.log('返回正确回调', res)
						that.page = that.page + 1;
						that.loading = false;
						var num = that.list1.length + that.list2.length;
						for (var i = 0; i < res.data.length; i++) {
							var item = res.data[i]
							if (num % 2 == 0) {
								that.list1.push(item);
							} else if (num % 2 == 1) {
								that.list2.push(item);
							}
							num++
						}
						that.loading = false;
					}, function(err) {
						console.log('返回错误回调', err)
						that.loading = false;
					})
			},
		}
	}
</script>

<style>
	@import url("../../common/uni.css");

	.image-box {
		display: flex;
		flex-direction: column;
		width: 0rpx;
	}
	.image-content {
		height: 30vw;
		width: 45vw;
		position: absolute;
		border-radius: 15rpx;
	}
	.box {
		display: block;
		height: 30vw;
		width: 45vw;
	}
	.bottom-right {
		height: 5vw;
		width: 5vw;
		margin-top: 24vw;
		margin-left: 39vw;
		position: absolute;
	}
	.name {
		z-index: 5;
		margin-top: 15rpx;
		margin-left: 15rpx;
		position: absolute;
	}
</style>